<template>
	<view class="cg-upload">
		<view class="cg-upload-item" v-for="(item,index) in computedList" :key="index" @click="preview(item)">
			<cg-image radius="8rpx" v-if="item.isImage" width="134rpx" height="134rpx" :src="item.url"
				type="cdn"></cg-image>
			<video v-else-if="item.isVideo" :src="item.url" :title="item.name || ('视频' + index)" :poster="item.thumb"
				class="van-uploader__preview-image" :data-index="index" :show-progress="false"
				:show-fullscreen-btn="false" :show-center-play-btn="false" :show-play-btn="false">
			</video>
			<view class="cg-upload-file" v-else>
				<!-- <van-icon name="description" size="66" /> -->

				<view class="img">
					<view class="suffix">{{item.extension}}</view>
					<img :src="filePath + '/static/img/notice/default.png'" alt />
				</view>
				<!-- <template v-else>{{item.original_name}}</template> -->

			</view>
			<view class="delete" @click.stop="deleteItem(item,index)" v-if="type === 'upload' && isDelete">
				<u-icon name="close" size="30rpx" color="#FFFFFF" />
			</view>
		</view>
		<view class="cg-upload-item" @click="onClick">

			<cg-image v-if="type === 'upload'"width="134rpx" height="134rpx"
				src="icon/auth/upload.png"></cg-image>
		</view>
	</view>
</template>

<script>
	export default {
		name: "cg-upload",
		props: {
			list: {
				default: () => {
					return []
				},
				type: Array
			},
			isDelete: {
				default: true,
				type: Boolean
			},
			// 预览还是上传
			type: {
				default: 'preview',
				type: String
			}
		},
		computed: {
			computedList() {
				const arr = []
				this.list.forEach(item => {
					console.log('item',item);
					let fileName = item.url || item
					arr.push({
						url: item.url || item,
						isImage: this.$utils.isImageFile(item),
						isVideo: this.$utils.isVideoFile(item),
						extension: fileName.substring(fileName.lastIndexOf('.') + 1)
					})
				})
				return arr
			},
		},
		data() {
			return {

			};
		},
		methods: {
			preview(item) {
				console.log(item)
				if (item.isImage) {
					this.$utils.previewImage(item.url)
				} else if (item.isVideo) {
					this.$utils.previewVideo(item.url)
				} else {
					this.$utils.openFile(item.url)
				}
			},
			deleteItem(item, index) {
				this.$emit('delete', item, index)
			},
			onClick() {
				this.$emit('upload')
			}
		}
	}
</script>

<style lang="scss">
	.cg-upload {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		// justify-content: space-around;

		.cg-upload-item {
			flex: auto;
			width: 134rpx;
			height: 134rpx;
			flex: 0 0 134rpx;

			position: relative;
			box-sizing: border-box;
			@include flexCenter;
			margin: 20rpx;

			image {
				width: 100%;
				height: 100%;
			}

			video {
				width: 100%;
				height: 100%;
			}

			.cg-upload-file {
				width: 100%;
				height: 100%;

				.img {
					width: 100%;
					height: 100%;
					position: relative;
					border-radius: 10rpx;

					.suffix {
						width: 100%;
						text-align: center;
						position: absolute;
						left: auto;
						bottom: 68rpx;
						color: #FFFFFF;
					}
				}

			}

			.delete {
				position: absolute;
				width: 40rpx;
				height: 40rpx;
				border-radius: 50%;
				top: -20rpx;
				right: -20rpx;
				color: #FFFFFF;
				background-color: $mainColor;
				@include flexCenter;
			}
		}
	}
</style>